<template>
  <div class="html">
    <div class="body">
      <div class="ch">
        <div class="hx" style="--i: 3; --h: 343">
          <div class="hx" style="--i: 4; --h: 43">
            <div class="hx" style="--i: 5; --h: 64">
              <div class="hx" style="--i: 6; --h: 143">
                <div class="hx" style="--i: 7; --h: 203">
                  <div class="hx" style="--i: 8; --h: 263">
                    <div class="hx" style="--i: 9; --h: 293"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "rainbow",
  mounted() {
    const bands = document.querySelectorAll(".hx");
    const duration = 4000;

    bands[0].animate(
      {
        transform: [`rotate(-135deg)`, `rotate(225deg)`]
      },
      {
        id: "primary",
        duration,
        iterations: Infinity,
        direction: "normal",
        easing: "ease-in-out"
      }
    );

    for (let i = 1, l = bands.length; i < l; ++i) {
      bands[i].animate(
        {
          transform: [`rotate(0deg)`, `rotate(18deg)`, `rotate(0deg)`]
        },
        {
          id: `subtle-offset${i}`,
          duration,
          iterations: Infinity,
          direction: "normal",
          easing: "ease-in-out"
        }
      );
    }
  }
}
</script>

<style scoped>
.ch {
  width: 800px;
  margin: 0 auto;
}

.ch div {
  color: hsl(var(--h, 343), var(--s, 100%), var(--l, 50%));
  border: var(--rad) solid currentColor;
  border-radius: 50%;
  --rad: 3vmin;
  --dim: 90vmin;
  width: calc(var(--dim) - var(--rad) * var(--i) * 2.5);
  height: calc(var(--dim) - var(--rad) * var(--i) * 2.5);

  display: flex;
  margin: auto;

  border-bottom-color: transparent;
  border-right-color: transparent;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.body {
  clip-path: polygon(10% 10%, 100% 0%, 100% 49%, 0% 49%);
  /*min-height: 80vh;*/
  display: flex;
  /*background: #ffffff;*/
  transform: translateY(25vmin);
}

.html {
  overflow: hidden;
}
</style>
